<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/content/variable.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <%@ include file="/content/head.jsp" %>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">添加视频</h3>
            </div>
            <form id="addInfo" class="form-horizontal" role="form">
                <div class="box-body">
                    <div class="form-group">
                        <label for="videoName" class="col-sm-2 control-label">视频名称：</label>
                        <div class="col-sm-8 ">
                            <input type="text" id="videoName" class="form-control" name="videoName" placeholder="视频名称">
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="classificationId" class="col-sm-2 control-label">所属种类</label>
                        <div class="col-sm-8 ">
                            <select id="classificationId" name="classificationId" class="form-control select2"></select>
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="videoPicFile" class="col-sm-2 control-label">视频图片：</label>
                        <div class="col-md-8">
                            <input type="file" class="file-loading" id="videoPicFile" accept="image/*">
                            <input type="text" class="form-control input-sm" id="videoPicUrl" name="videoPic">
                        </div>
                        <div class="col-sm-2">
                            <span class="help-inline" style="color: #a94442"></span>
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="videoDuration" class="col-sm-2 control-label">播放时长：</label>
                        <div class="col-sm-8 ">
                            <input type="text" id="videoDuration" class="form-control" name="videoDuration" placeholder="播放时长">
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="videoPlayCount" class="col-sm-2 control-label">播放次数：</label>
                        <div class="col-sm-8 ">
                            <input type="text" id="videoPlayCount" class="form-control" name="videoPlayCount" placeholder="播放次数">
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="introduction" class="col-sm-2 control-label">视频简介：</label>
                        <div class="col-sm-8 ">
                            <input type="text" id="introduction" class="form-control" name="introduction"
                                    placeholder="视频简介">
                        </div>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="videoUrlFile" class="col-sm-2 control-label">视频地址：</label>
                        <div class="col-md-8">
                            <input type="file" class="file-loading" id="videoUrlFile" accept="video/*">
                            <input type="text"  class="form-control input-sm" id="videoUrl"
                                   name="videoUrl">
                        </div>
                        <div class="col-sm-8">
                            <span class="help-inline" style="color: #a94442"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">视频分类：</label>
                        <div class="col-sm-8 ">
                            <label>
                                <input type="radio"checked name="status" value="1"
                                       class="flat-red">热门
                            </label>
                            <label>
                                <input type="radio"  name="status" value="2"
                                       class="flat-red">最新
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="videoWeight" class="col-sm-2 control-label">视频权重：</label>
                        <div class="col-sm-8 ">
                            <input type="text" id="videoWeight" class="form-control" name="videoWeight"
                          placeholder="视频权重,值越大，排序越靠前">
                        </div>
                    </div>
                    <br>
                    <div class="col-md-offset-5 col-md-9">
                        <button type="submit" class="btn btn-success">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /.row -->
<%@ include file="/content/js.jsp" %>
<script type="text/javascript">
    $(function () {
        classificationSelect();
        $('#addInfo').bootstrapValidator({
            message: '此值无效',
            fields: {
                videoName: {
                    message: '视频名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '视频名称不能为空'
                        }
                    }
                },
                introduction: {
                    message: '视频简介验证失败',
                    validators: {
                        notEmpty: {
                            message: '视频简介不能为空'
                        }
                    }
                },
                videoUrl: {
                    message: '视频地址验证失败',
                    validators: {
                        notEmpty: {
                            message: '正片地址不能为空'
                        }
                    }
                }

            }
        }).on('success.form.bv', function (e) {//点击提交之后
            e.preventDefault();
            var $form = $(e.target);
            var bv = $form.data('bootstrapValidator');
            saveInfo();
        });
        function classificationSelect() {
            $("#classificationId").select2({
                theme: "bootstrap",
                language: "zh-CN",
                placeholder: "请选择",
                placeholderOption: "first",
                allowClear: true,
                width: 250,
                ajax: {
                    url: "<%=path %>/classification/queryClassification",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {

                        return {
                            classificationName: params.term,
                        };

                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) {
                    return markup;
                },
                minimumInputLength: 0,
                templateResult: formatRepo,
                templateSelection: formatRepoSelection
            });
        }

        //视频上传
        $("#videoUrlFile").fileinput({
            uploadUrl: "<%=path%>/upload/uploadClassifyVideo",
            browseClass: "btn btn-primary",
            autoReplace: true,
            dropZoneEnabled: false,
            browseLabel: "上传",
            showCaption: false,
            showRemove: false,
            showPreview: false,
            showUpload: true,
            showZoom: false,
            maxFileCount: 1, ////表示允许同时上传的最大文件个数
//        allowedFileTypes:["video"], //文件的选择类型[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]
            maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            previewSettings: {
                type: "video",
                video: {width: "auto", height: "100px"},
            }
        });
        $('#videoUrlFile').on('fileuploaded', function (event, data, previewId, index) {
            console.log(data.response);
            var path = data.response.initialPreviewConfig[0].extra.path;
            $("#videoUrl").val(path);
            $("#videoUrl").triggerHandler("blur");
        });
        $('#videoUrlFile').on('filedeleted', function (event, key, jqXHR, data) {
            if ($("#videoUrl").val() == data.path)
                $("#videoUrl").val('');
            $("#videoUrl").triggerHandler("blur");
        });
     });
    //视频封面上传
    $("#videoPicFile").fileinput({
        uploadUrl: "<%=path%>/upload/uploadClassifyImg",
        browseClass: "btn btn-primary",
        enctype: 'multipart/form-data',
        autoReplace: true,
        dropZoneEnabled: false,
        browseLabel: "上传",
        showCaption: false,
        showRemove: false,
        showUpload: true,
        showZoom: false,
        maxFileCount: 1, ////表示允许同时上传的最大文件个数
        allowedFileTypes: ["image"], //文件的选择类型[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]
        previewSettings: {
            image: {width: "auto", height: "100px"},
        },
    });
        $('#videoPicFile').on('fileuploaded', function (event, data, previewId, index) {
            var path = data.response.initialPreviewConfig[0].extra.path;
            $("#videoPicUrl").val(path);
        });
        $('#videoPicFile').on('filedeleted', function (event, key, jqXHR, data) {
            if ($("#videoPicUrl").val() == data.path)
                $("#videoPicUrl").val('');
        });

    function saveInfo() {
        $.post("<%=path%>/videoCollection/addVideoCollectionSave",
            $("#addInfo").serialize()
            , function (data) {
                if (data.missage == "success") {
                    modalMsg("新增成功", "success");
                    window.parent.location.reload();
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }else if(data.missage == "error"){
                    modalMsg("新增失败", "error");
                }else{
                    modalMsg("更新失败", "error");
                }
            }
        );
    }

</script>
</body>
</html>